<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选或者全不选</title>
    <script>
        //1.编写单击事件调用函数
        function checkAll(obj) {
            //拿到全选复选框的状态
            // let obj= document.getElementById("all");
            let flag = obj.checked;

         //获取其他的复选框
            let hobbyObj = document.getElementsByName("hobby");
            //遍历其他复选框，并设置cheked属性值
           for (let i=0; hobbyObj.length;i++){
               hobbyObj[i].checked=flag;
           }
        }

        function reverseSelect() {
            //1.编写单击事件调用函数

                //拿到全选复选框的状态
                let obj = document.getElementById("reverse");
                let flag = obj.checked;

                //获取其他的复选框
                let hobbyObj = document.getElementsByName("hobby");
                //遍历其他复选框，并设置cheked属性值
                for (let i = 0; hobbyObj.length; i++) {
                    hobbyObj[i].checked = !hobbyObj[i].checked;
                }

        }
    </script>
</head>
<body>
    <h3>商品价格列表</h3>
<input type="checkbox" name="hobby" value="7100"/>山地自行车<br/>
<input type="checkbox" name="hobby" value="2000"/>时尚女装<br/>
<input type="checkbox" name="hobby" value="4200"/>笔记本电脑<br/>
<input type="checkbox" name="hobby" value="6000"/>情侣手表<br/>
<input type="checkbox" name="hobby" value="5200"/>桑塔纳<br/>
<!--   这里的 this 代表本标签对象，不用在function中再次定义对象-->
<input type="checkbox" id="all" onclick="checkAll(this)" />全选|全不选|
<input type="checkbox" id="reverse" onclick="reverseSelect()"/>反选
</body>
</html>